import React, { Component } from "react";
import './list.css';

import {ListContainer, ListItem} from './styled';

export default class List extends Component {
  constructor(props, context) {
    super(props);
    this.state = {
      list: props.list
    };
    this.add = this.add.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    // console.log("next", nextProps);
    this.setState({
      list: nextProps.list
    });
  }

  action = index => {
    this.props.action(index);
  };
  value = () => this.props.list;

  add = item => {
    console.log(this.props.addListItem);
    this.props.addListItem(item);
  };

  render() {
    const { list, title } = this.props;
    const variant = 'error';
    return (
      <ListContainer color="#333" width={50}>
        <h2 class="App list-heading">{title}</h2>
        {list.map((item, index) => (
          <ListItem key={index} onClick={() => this.props.changeListId(index)}>
            {item}
          </ListItem>
        ))}
      </ListContainer>
    );
  }
}
